<template>
  <view class="about">
    <uv-navbar title="" auto-back placeholder />
    <uv-avatar :src="appIcon" shape="square" size="200rpx" />
    <uv-text
      :text="appName"
      align="center"
      color="#000000"
      size="48rpx"
      margin="40rpx 0"
    />
    <view class="about-list">
      <view
        class="about-list-item"
        v-for="(item, k) in menuList"
        :key="k"
        @click="handleMenu(item)"
      >
        <view>
          <text>{{ item.title }}</text>
          <text>{{ item.value }}</text>
        </view>
        <uv-icon v-if="item.showArrow" name="arrow-right" size="28rpx" color="#757575" />
      </view>
    </view>
    <view class="copyright">
      <view>Copyright © 智慧消防 版权所有 </view>
      <view>蜀ICP备XXXXXXXXX号-1</view>
    </view>
    <g-upgrade v-model:value="upgradeShow" :info="upgradeInfo" />
  </view>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { onBackPress } from "@dcloudio/uni-app";
import { uploadApp } from "@/request/common.js";

const appIcon = ref("/static/logo.png"); // APP图标
const appName = ref(""); // APP名称
const upgradeShow = ref(false); // 升级弹窗
const upgradeInfo = ref(); // 升级信息

const menuList = ref([
  // 菜单列表
  { title: "版本信息：", value: "", showArrow: false, path: "update" },
  { title: "用户协议", showArrow: true, path: "/pages/user/agreement?type=USER_POLICY" },
  {
    title: "隐私协议",
    showArrow: true,
    path: "/pages/user/agreement?type=PRIVACY_POLICY",
  },
]);

onMounted(() => {
  getInfo();
  uni.$on("upgrade", (v) => {
    if (v) {
      upgradeInfo.value = v;
      upgradeShow.value = true;
    }
  });
});

onBeforeUnmount(() => {
  uni.$off("upgrade");
});

onBackPress((e) => {
  if (upgradeShow.value && upgradeInfo.value.forceUpdate == 1) {
    return true;
  }
  return false;
});

// 获取系统信息
const getInfo = () => {
  uni.getSystemInfo().then((res) => {
    appName.value = res.appName;
    // #ifdef APP-PLUS
    menuList.value[0].value = res.appWgtVersion;
    // #endif
    // #ifndef APP-PLUS
    menuList.value[0].value = res.appVersion;
    // #endif
  });
};

// 处理菜单点击事件
const handleMenu = (item) => {
  // 检查更新
  if (item.path == "update") {
    // #ifdef APP-PLUS
    uploadApp(true);
    // #endif
    // #ifdef H5
    uni.showToast({
      title: "已是最新版本",
      icon: "none",
    });
    // #endif
  } else {
    // 跳转
    uni.navigateTo({
      url: item.path,
    });
  }
};
</script>
<style lang="scss" scoped>
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  .about-list {
    width: 100%;
    margin: 60rpx 0;
    &-item {
      color: #323233;
      font-size: 28rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 60rpx;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: calc(100% - 120rpx);
        height: 1rpx;
        margin: 0 auto;
        background-color: #f2f2f2;
      }
      &:last-child::after {
        display: none;
      }
      &:active {
        background-color: #e6f1e9;
      }
    }
  }
  .copyright {
    position: absolute;
    bottom: 50rpx;
    width: 100%;
    text-align: center;
    font-weight: 300;
    font-size: 24rpx;
    color: #bdbdbd;
  }
}
:deep(.uv-avatar--square) {
  border-radius: 60rpx;
  overflow: hidden;
}
</style>
